<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>敲键盘的贼 - 打字游戏</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/game.css">
    <link rel="stylesheet" href="css/ui.css">
</head>
<body>
    <div id="game-container">
        <!-- 开始界面 -->
        <div id="start-screen" class="screen">
            <div class="game-title-container">
                <h1>敲键盘的贼</h1>
            </div>
            <p class="game-description">通过打字控制小偷逃离警察的追捕！速度越快，逃脱越容易！</p>
            
            <div class="difficulty-selection">
                <h2>选择难度</h2>
                <div class="difficulty-buttons">
                    <button class="difficulty-btn" data-difficulty="easy">简单</button>
                    <button class="difficulty-btn" data-difficulty="medium">中等</button>
                    <button class="difficulty-btn" data-difficulty="hard">困难</button>
                </div>
            </div>
            
            <button id="start-btn" class="primary-btn">开始游戏</button>
            
            <div class="instructions">
                <h3>游戏说明</h3>
                <p>打字速度决定小偷的移动方式和速度：</p>
                
                <div class="speed-levels">
                    <div class="speed-level">
                        <div class="speed-icon">🚶</div>
                        <div class="speed-info">
                            <div class="speed-name">步行</div>
                            <div class="speed-value">&lt; 30 WPM</div>
                        </div>
                    </div>
                    <div class="speed-level">
                        <div class="speed-icon">🏃</div>
                        <div class="speed-info">
                            <div class="speed-name">奔跑</div>
                            <div class="speed-value">30-60 WPM</div>
                        </div>
                    </div>
                    <div class="speed-level">
                        <div class="speed-icon">🏍️</div>
                        <div class="speed-info">
                            <div class="speed-name">骑摩托车</div>
                            <div class="speed-value">60-90 WPM</div>
                        </div>
                    </div>
                    <div class="speed-level">
                        <div class="speed-icon">🚗</div>
                        <div class="speed-info">
                            <div class="speed-name">开轿车</div>
                            <div class="speed-value">&gt; 90 WPM</div>
                        </div>
                    </div>
                </div>
                
                <p>在游戏过程中可以获得各种道具来帮助逃脱：</p>
                <ul>
                    <li>🍌 香蕉皮 - 让警察减速</li>
                    <li>☕ 咖啡 - 提高打字速度</li>
                    <li>🛡️ 护盾 - 免疫一次错误输入</li>
                </ul>
                
                <p class="warning-text">警察会在游戏开始5秒后追赶你，如果被追上则游戏结束！</p>
            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen hidden">
            <div id="game-hud">
                <div class="hud-item">
                    <span class="hud-label">速度:</span>
                    <span id="wpm-display">0 WPM</span>
                </div>
                <div class="hud-item">
                    <span class="hud-label">正确率:</span>
                    <span id="accuracy-display">100%</span>
                </div>
                <div class="hud-item">
                    <span class="hud-label">时间:</span>
                    <span id="time-display">00:00</span>
                </div>
                <div class="hud-item">
                    <span class="hud-label">道具:</span>
                    <span id="item-display">无</span>
                </div>
            </div>

            <div id="typing-area">
                <div id="text-display"></div>
                <div id="cursor"></div>
            </div>

            <div id="game-scene">
                <!-- 背景层 -->
                <div id="background-layer" class="scene-layer">
                    <div class="sky"></div>
                    <div class="buildings"></div>
                </div>
                
                <!-- 中间层 - 街道和障碍物 -->
                <div id="street-layer" class="scene-layer">
                    <div class="street"></div>
                    <div id="obstacles-container"></div>
                </div>
                
                <!-- 前景层 - 角色 -->
                <div id="character-layer" class="scene-layer">
                    <div id="thief-character" class="thief-character thief-walking"></div>
                    <div id="police-character" class="police-character"></div>
                </div>
                
                <!-- 距离指示器 -->
                <div id="distance-bar">
                    <div id="distance-indicator"></div>
                </div>
            </div>
        </div>

        <!-- 结束界面 -->
        <div id="end-screen" class="screen hidden">
            <h2 id="game-result">游戏结束</h2>
            <div class="stats-container">
                <div class="stat-item">
                    <span class="stat-label">平均速度:</span>
                    <span id="final-wpm">0 WPM</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">正确率:</span>
                    <span id="final-accuracy">0%</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">存活时间:</span>
                    <span id="final-time">00:00</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">最终得分:</span>
                    <span id="final-score">0</span>
                </div>
            </div>
            <div class="end-buttons">
                <button id="restart-btn" class="primary-btn">再来一次</button>
                <button id="home-btn" class="secondary-btn">返回主页</button>
            </div>
        </div>
    </div>

    <!-- 加载第三方库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

    <!-- 加载游戏工具类 -->
    <script src="js/utils/Timer.js"></script>
    <script src="js/utils/Storage.js"></script>
    <script src="js/utils/AudioManager.js"></script>

    <!-- 加载游戏核心逻辑 -->
    <script src="js/game/TypingManager.js"></script>
    <script src="js/game/CharacterManager.js"></script>
    <script src="js/game/PoliceAI.js"></script>
    <script src="js/game/ItemManager.js"></script>
    <script src="js/game/ScoreManager.js"></script>
    <script src="js/game/ObstacleManager.js"></script>
    <script src="js/game/MilestoneManager.js"></script>
    <script src="js/game/Game.js"></script>

    <!-- 加载UI管理 -->
    <script src="js/ui/StartScreen.js"></script>
    <script src="js/ui/GameHUD.js"></script>
    <script src="js/ui/EndScreen.js"></script>
    <script src="js/ui/UIManager.js"></script>
    
    <!-- 加载特效 -->
    <script src="js/effects/BackgroundEffects.js"></script>

    <!-- 主入口文件 -->
    <script src="js/main.js"></script>
</body>
</html>
